<template>
  <div ref="barChart" style="width: 100%; height: 100%; display: flex;
  justify-content: center; align-items: center;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.barChart);
    myChart.setOption({
      title: {
        text: '各类型房源销售量（月）',  // 添加标题
        left: 'center',  // 标题居中
        textStyle: {
          color: '#333',  // 标题文字颜色
          fontSize: 16,   // 字体大小
          fontWeight: 'bold'  // 字体加粗
        }
      },
      tooltip: {
        trigger: 'axis',  // 提示框触发类型
        axisPointer: {  // 坐标轴指示器
          type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      xAxis: {
        data: ["一室一厅", "两室一厅", "三室一厅", "三室两厅", "复式", "公寓套房", "开放式"],
        axisLabel: {  // X轴标签
          rotate: 30,  // 旋转30度，防止文字重叠
          interval: 0  // 显示所有标签
        }
      },
      yAxis: {},
      series: [{
        name: '销售量',
        type: 'bar',
        data: [30, 20, 6, 10, 20, 9, 11, 19],
        barWidth: '60%',  // 柱图宽度
        itemStyle: {
          normal: {
            color: function(params) {  // 颜色渐变
              var colorList = [
                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
              ];
              return colorList[params.dataIndex % colorList.length];
            }
          }
        }
      }]
    });
  }
}
</script>

<style scoped>
.bar-chart-container {
  width: 100%; 
  height: 400px;  
}
</style>
